<template>
  <div>
    <!--<k-form-design hide-reset-hint />-->
    <a-card title="表单管理">
      <template slot="extra">
        <a-button shape="round" icon="plus" >
          新建分组
        </a-button>
        <a-button type="primary" shape="round" icon="plus" @click="onDesigner" >
          创建新表单
        </a-button>
      </template>
    <a-card :key="index"  v-for="(item,index) in group" style="margin-bottom: 8px;" >
      <div slot="title">
        {{item.categoryName}}<span class="form-num">({{item.count}})</span>
      </div>
      <a-list item-layout="horizontal" :data-source="item.formList">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-list-item-meta
                  class="form-title"
                  :description="item.remark"
          >
            <a slot="title">{{ item.formName }}</a>
            <a-avatar
                    slot="avatar"
                    shape="square"
                    :src="item.icon"/>
          </a-list-item-meta>
          <div class="form-visible">
            可见范围：
            <p>全部可见<a-button type="link">修改</a-button></p>
          </div>
          <div class="form-date">
            最后更新：
            <p>{{ item.updateTime }}</p>
          </div>
          <div class="form-action">
            <a  @click="onDesigner(item)">编辑</a>
            <a-divider type="vertical" />
            <a>停用</a>
            <a-divider type="vertical" />
            <a>移动到</a>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
    </a-card>
  </div>
</template>
<script>
import { listCategoryForm } from '@/api/form'

export default {
  name: 'ProcessForm',
  data() {
    return {
      group: []
    }
  },
  created() {
    this.handleLoad()
  },
  methods: {
    handleLoad() {
      listCategoryForm().then(({ data }) => {
        this.group = data
      })
    },
    onDesigner(row) {
      if (!row) {
        row = {}
      }
      const r = this.$router.resolve({ path: '/form/designer', query: { processKey: row.processKey }})
      window.open(r.href, '_blank')
    }
  }
}
</script>
<style lang="less">
  .form-num{
    font-weight: normal;
    color: rgba(17, 31, 44, 0.56);
  }
  .form-title{
    -webkit-box-flex: 2;-ms-flex: 2;flex: 2;
  }
  .form-visible,.form-date{
    -webkit-box-flex: 1;-ms-flex: 1;flex: 1;
  }
  .form-action{
    display: flex;idth: 165px;
  }
  .ant-btn{
    margin-left: 10px;
  }
</style>
